<template>
    <div>
        <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">

            <el-form-item label="菜单名" prop="MenuName">
                <el-input v-model="ruleForm.MenuName"></el-input>
            </el-form-item>

            <el-form-item label="级类别">
                <el-select v-model="ruleForm.level" placeholder="请选择级类别" @change="judge">
                    <el-option v-for="(item, index) in level" :key="index" :label="item.name"
                        :value="item.id"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="父级" v-show="bool" prop="ParentID">
                <el-select v-model="ruleForm.ParentID" placeholder="请选择所属父级">
                    <el-option v-for="(item, index) in MenusFu" :key="index" :label="item.MName"
                        :value="item.MId"></el-option>
                </el-select>
            </el-form-item>

            <el-form-item label="菜单路径" prop="Url">
                <el-input v-model="ruleForm.Url"></el-input>
            </el-form-item>
            <el-form-item label="菜单图标" prop="Icon">
                <el-input v-model="ruleForm.Icon"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" required>
                <el-form-item prop="LastTime" style="width: 200px;">
                    <el-date-picker v-model="ruleForm.LastTime" type="date" placeholder="选择日期时间">
                    </el-date-picker>
                </el-form-item>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="submitForm('ruleForm')">立即创建</el-button>
                <el-button @click="resetForm('ruleForm')">重置</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>

<script>

export default {
    name: 'MenusCreate',
    data() {
        return {
            ruleForm: {
                MenuID: 0,
                MenuName: '',
                ParentID: null,
                Url: '',
                Icon: '',
                level: null,
                LastTime: new Date(),
            },
            bool: false,
            MenusFu: [],
            level: [
                { id: 1, name: '父级' },
                { id: 2, name: '子级' }
            ],
            rules: {
                MenuName: [
                    { required: true, message: '请输入菜单名', trigger: 'blur' },
                    { min: 4, max: 12, message: '长度在 4 到 12 个字符', trigger: 'blur' }
                ],
                // RoleID: [
                //     { required: true, message: '请选择角色', trigger: 'change' }
                // ],
                LastTime: [
                    { type: 'date', required: true, message: '请选择日期', trigger: 'change' }
                ],
            }
        }
    },
    props: {
        dialogVisible: Boolean
    },
    methods: {
        //提交表单
        submitForm(formName) {
            this.$refs[formName].validate((valid) => {
                if (valid) {
                    //axios 提交
                    //this.ruleForm
                    console.log('this.ruleForm: ', this.ruleForm);

                    this.axios({
                        method: 'post',
                        url: 'Menus',
                        params: {},
                        data: this.ruleForm
                    }).then(res => {
                        console.log('res: ', res);
                        if (res.data.code > 0) {
                            this.$message({
                                message: res.data.msg,
                                type: 'success'
                            });
                            ///* 改变父窗口的值来关闭弹窗 */
                            this.$emit('update:dialogVisible', false);
                            // 触发刷新
                            this.$emit('refresh')

                        } else {
                            this.$message({
                                message: res.data.msg,
                                type: 'error'
                            })
                        }
                    })
                        .catch(err => {
                            console.log('err: ', err);

                        })
                } else {
                    console.log('error submit!!');
                    return false;
                }
            });
        },

        judge(v) {
            if (v == 1) {
                this.ruleForm.ParentID = 0;
                this.bool = false;
            } else if (v == 2) {
                this.bool = true;
                this.ruleForm.ParentID = 1;
            }
        },

        //重置表单
        resetForm(formName) {
            this.$refs[formName].resetFields();
        }
    },
    created() {
        this.axios({
            method: 'get',
            url: 'Menus/GetFu'
        }).then(res => {
            console.log('res: ', res);
            this.MenusFu = res.data.data;

        })
    }
}
</script>

<style scoped></style>